<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>姓名
			</view>
			<input type="text" v-model="userInfo.name" placeholder="请输入姓名" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>性别
			</view>	
			<view class="picker_class">
				<radio-group @change="handleSexChange" v-model="userInfo.sex">
					<label class="radio">
						<radio value="1" style="transform: scale(0.6);" :checked="userInfo.sex == '1'" />男</label>
					<label class="radio">
						<radio value="2" style="transform: scale(0.6);margin-left:10upx" :checked="userInfo.sex == '2'"/>女</label>
				</radio-group>
			</view>
		</view>
		<view class="group_item">
			<view class="group_title" style="width:140upx">
				<span style="color: red;">*</span>民族
			</view>
			<picker @change="bindNationChange" :range="nationList">
				<view class="picker_class">{{userInfo.nation}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width:140upx">
				<span style="color: red;">*</span>生日
			</view>
			<picker @change="bindBirthdayChange" mode = "date">
				<view class="picker_class">{{userInfo.birthday}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>手机号
			</view>
			<input type="tel" v-model="userInfo.telNo" placeholder="请输入手机号" class="picker_class" />
		</view>
		
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>身份证号
			</view>
			<input type="tel" v-model="userInfo.idCard" placeholder="请输入手机号" class="picker_class" />
		</view>
		
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>家庭住址
			</view>
			<textarea maxlength="140" v-model="userInfo.homeAddress" type="text" placeholder="请输入家庭住址" class="picker_content_class" />
		</view>
		
		<view class="group_item">
			<view class="group_title" style="width:140upx">
				文化程度
			</view>
			<picker @change="bindEducationChange" :range="eduList">
				<view class="picker_class">{{userInfo.education}}</view>
			</picker>
		</view>
		
		
		<view class="group_item" style="margin-bottom: 200upx;">
			<view class="group_title" style="width:140upx">
				婚姻状况
			</view>
			<picker @change="bindMarriageChange" :range="marriageList">
				<view class="picker_class">{{userInfo.maritalStatus}}</view>
			</picker>
		</view>
		
		
		<button type="primary" class="button_class" @click="addUserInfo">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {				
				userInfo:{},
				
				nationList: [
					"汉族","壮族","满族","回族","苗族","维吾尔族","土家族","彝族","蒙古族",
					"藏族","布依族","侗族","瑶族","朝鲜族","白族","哈尼族","哈萨克族","黎族",
					"傣族","畲族","傈僳族","仡佬族","东乡族","高山族","拉祜族","水族","佤族",
					"纳西族","羌族","土族","仫佬族","锡伯族","柯尔克孜族","达斡尔族","景颇族",
					"毛南族","撒拉族","布朗族","塔吉克族","阿昌族","普米族","鄂温克族","怒族",
					"京族","基诺族","德昂族","保安族","俄罗斯族","裕固族","乌孜别克族","门巴族",
					"鄂伦春族","独龙族","塔塔尔族","赫哲族","珞巴族"
				],
				eduList:[
					"博士","研究生","本科","专科","技工","高中","初中","小学","其他"
				],
				marriageList:[
					"已婚","未婚"
				]
			}
		},
		onLoad(option) {
            if(option){
				this.userInfo = JSON.parse(decodeURIComponent(option.item))
			}
			if(!this.userInfo.nation){
				this.userInfo.nation = "请选择民族"
			}
			if(!this.userInfo.education){
				this.userInfo.education = "请选择文化程度"
			}
			if(!this.userInfo.birthday){
				this.userInfo.birthday = "请选择生日日期"
			}
			if(!this.userInfo.maritalStatus){
				this.userInfo.maritalStatus = "请选择婚姻状况"
			}
			console.log(this.userInfo)
		},
		methods: {
			addUserInfo() {
				if(!this.userInfo.name){
					this.$api.msg("请输入姓名")
					return;
				}
				if(!this.userInfo.sex){
					this.userInfo.sex = "1"
				}
				if(this.userInfo.nation == "" || this.userInfo.nation == "请选择民族"){
					this.$api.msg("请选择民族")
					return;
				}
				if(this.userInfo.birthday=="" || this.userInfo.birthday == "请选择生日日期"){
					this.$api.msg("请选择生日")
					return;
				}
				if(!this.$api.util.validateMobileNo(this.userInfo.telNo)){
					this.$api.msg("请输入正确的手机号")
					return;
				}
				if(!this.$api.util.validateIdCardNo(this.userInfo.idCard)){
					this.$api.msg("请输入正确的身份证号")
					return;
				}
				if(!this.userInfo.homeAddress){
					this.$api.msg("请输入家庭住址")
					return;
				}
				if(this.userInfo.birthday == "请选择生日日期"){
					this.userInfo.birthday = ""
				}
				if(this.userInfo.maritalStatus == "请选择婚姻状况"){
					this.userInfo.maritalStatus = ""
				}
				let params = this.userInfo;
				this.$api.request.addOrUpdateOwner(params,(res)=>{
					if (res.body.status.statusCode == "0") {
						this.$api.msg("保存成功")
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						this.$api.msg("保存失败")
					}
				})
               
			},
			bindMarriageChange(e){
				this.userInfo.maritalStatus = this.marriageList[e.detail.value]
			},
			handleSexChange(e){
				this.userInfo.sex = e.detail.value
			},
			bindBirthdayChange(e){
				this.userInfo.birthday = e.detail.value
			},
			bindEducationChange(e){
				this.userInfo.education = this.eduList[e.detail.value]
			},
			bindNationChange(e){
				this.userInfo.nation = this.nationList[e.detail.value]
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}
</style>
